<div class="lv-treenode-container">
  <!-- node -->
  <div class="lv-treenode-wrap">
    <!-- indent -->
    <lv-tree-indent
      *ngIf="treeNode.level"
      [class.lv-tree-indent-expanded-placeholder]="!isExpandedToggleIcon"
      [lvLevel]="treeNode.level"
      [lvIsStart]="lvNodeIsStart"
      [lvIsEnd]="lvIsNodeIsEnd"
    ></lv-tree-indent>

    <div class="lv-treenode-main">
      <!-- 展开子项icon -->
      <ng-container *ngIf="isExpandedToggleIcon; else expandedPlaceholder">
        <!-- 加载中 -->
        <ng-container *ngIf="treeNode.isLoading">
          <img src="{{assetsPrefixPath}}assets/webp/gray.png" alt="icon-loading" class="lv-icon-loading" />
        </ng-container>

        <!-- 加载完成 -->
        <ng-container *ngIf="!treeNode.isLoading">
          <i
            class="lv-treenode-toggle-expanded"
            [ngClass]="{ active: treeNode.expanded }"
            [lv-icon]="expandedToggleIcon[!!treeNode.expanded + '']"
            (click)="expanded($event)"
          ></i>
        </ng-container>
      </ng-container>

      <!-- 占位展开icon -->
      <ng-template #expandedPlaceholder>
        <div class="lv-treenode-expanded-placeholder" *ngIf="lvShowExpandedIcon"></div>
      </ng-template>

      <!-- checkbox -->
      <ng-container *ngIf="isCheckbox">
        <label
          class="lv-treenode-checkbox"
          lv-checkbox
          lvControl
          (click)="selectedNode($event, treeNode)"
          [ngModel]="isSelected(treeNode)"
          [lvIndeterminate]="!treeNode.isLeaf && isHalfCheck"
          [lvDisabled]="treeNode.disabled"
        ></label>
      </ng-container>

      <!-- 内容 -->
      <div
        class="lv-treenode-content"
        [ngClass]="{ disabled: treeNode.disabled, 'lv-treenode-blocknode': blockNode }"
        (click)="clickNode($event, treeNode)"
        (dblclick)="dbClickNode($event, treeNode)"
      >
        <ng-container [ngSwitch]="!!nodeTemplate">
          <!-- 默认 -->
          <ng-container *ngSwitchDefault>
            <!-- 内容icon -->
            <ng-container *ngIf="isContentToggleIcon">
              <i class="lv-treenode-toggle-content" [lv-icon]="contentToggleIcon[!!treeNode.expanded + '']"></i>
            </ng-container>
            <!-- 内容主体 -->
            <div class="lv-treenode-content-label" lv-overflow>
              <lv-highlight [lvContent]="lvHighlightContent" [lvWholeStr]="treeNode.label"></lv-highlight>
            </div>
          </ng-container>
          <!-- 模板 -->
          <ng-container *ngSwitchCase="true">
            <div class="lv-treenode-content-label">
              <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: treeNode }"></ng-container>
            </div>
          </ng-container>
        </ng-container>
      </div>
    </div>
  </div>
</div>
